<template>
  <Head></Head>
  <!-- 搜索栏导航 -->
  <Search />
  <div class="container">
    <!-- 版心 -->
    <div class="center">
      <!-- 搜索栏导航end -->
      <!-- 轮播及三级分类栏 -->
      <div class="category-box">
        <!-- 轮播 -->
        <div class="carousel">
          <!-- <el-carousel trigger="click" height="460px">
            <el-carousel-item v-for="item in swiperList" :key="item.id">
              <img :src="item.url" alt="" />
            </el-carousel-item>
          </el-carousel> -->
          <swiper
            :data="swiperList"
            :height="460"
            :width="1200"
            :isOpenPagination="true"
            :isOpenNavigation="true"
          ></swiper>
        </div>
        <!-- 三级分类 -->
        <ul class="category">
          <li
            v-for="item in categoryInfos"
            class="flex justify-between"
            @mouseenter="showCategoryBox"
            @mouseleave="disCategoryBox"
          >
            <a href="#">{{ item.title }}</a>
            <sapn
              style="margin-right: 20px"
              class="mx-3 text-white iconfont icon-arrow-right-bold"
            ></sapn>
          </li>
        </ul>
        <div
          class="categoryBox"
          ref="category_dialog"
          @mouseenter="showCategoryBox"
          @mouseleave="disCategoryBox"
        >
          <div class="categoryBox-wrap">
            <div
              class="categoryBox-col"
              v-for="index in Math.floor(categorys.length / 6)"
              :key="index"
            >
              <!-- index: {{ index }} -->
              <div class="categoryBox_item" v-for="j in 6" :key="j">
                <!-- j: {{ j }} -->
                <img
                  :src="categorys[(index - 1) * 6 + (j - 1)].imgUrl"
                  alt=""
                  srcset=""
                />
                <span>{{ categorys[(index - 1) * 6 + (j - 1)].title }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 轮播及三级分类栏end -->
      <!-- 第一栏展示区 -->
      <div class="flex justify-between showOne">
        <div class="flex flex-row flex-wrap oneFirst">
          <div
            class="flex flex-col oneFirst-item"
            v-for="item in oneTabs"
            :key="item.id"
          >
            <span class="iconfont icon-search"><a href="#"></a></span>
            <span class="">{{ item.text }}</span>
          </div>
        </div>
        <img v-for="img in oneImgs" :src="img.url" alt="" class="one-img" />
      </div>
      <!-- 第一栏展示区end -->
    </div>
  </div>
  <div class="container cTwo">
    <div class="center">
      <!-- 第二栏 -->
      <img
        class="showTwo"
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ef461a313aac4fd0aae1e6f63a75138f.jpg?thumb=1&w=1533&h=150&f=webp&q=90"
        alt=""
      />
      <!-- 第二栏end -->
      <Floor :datas="phoneInfos" :title="'手机'" :tabs="[]" />
      <Floor
        :datas="jiadianInfos"
        :title="'家电'"
        :tabs="['电视机', '空调', '洗衣机']"
      />
      <img
        class="showTwo"
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ef461a313aac4fd0aae1e6f63a75138f.jpg?thumb=1&w=1533&h=150&f=webp&q=90"
        alt=""
      />
    </div>
  </div>
  <Footer />
</template>

<script lang="ts">
export default {
  name: "Home",
};
</script>

<script lang="ts" setup>
import { ref, onMounted, nextTick } from "vue";
// 导入api
import { getFloorGoods, getHotGoods } from "../api/Home";
// 定义分类栏数据
interface IFloorItem {
  id: number;
  url: string;
  name: string;
  desc: string;
  price: number;
}
type IFloorArr = IFloorItem[];

// 处理数据函数
const handleFloorData = (arr: any) => {
  return arr.map((item: any) => {
    return {
      id: item.product_id,
      url: "http://101.132.181.9:3000/" + item.product_picture,
      name: item.product_name,
      desc:
        item.product_intro.length <= 44
          ? item.product_intro
          : item.product_intro.substr(0, 44) + "...",
      price: item.product_price,
    };
  });
};
// 第三栏手机数据
const phoneInfos = ref<IFloorArr>([]);
// 第四栏电视数据
const jiadianInfos = ref<IFloorArr>([]);

// 显示三级分类盒子
const category_dialog = ref();
// 分类栏数据
let categorys = ref([
  {
    id: 1,
    imgUrl:
      "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b656495821144d92bd932d91eedcf659.png?thumb=1&w=50&h=50&f=webp&q=90",
    title: "Redmi X65 2022款",
  },
]);

const showCategoryBox = async () => {
  category_dialog.value.setAttribute("style", "display: block;");
};
const disCategoryBox = async () => {
  category_dialog.value.setAttribute("style", "display: none;");
};
// 导航栏数据
const navInfos = ref([
  {
    name: "Xiaomi手机",
  },
  {
    name: "全部商品",
  },
  {
    name: "关于我们",
  },
  // {
  //   name: "笔记本",
  // },
  // {
  //   name: "平板",
  // },
  // {
  //   name: "家电",
  // },
  // {
  //   name: "路由器",
  // },
  // {
  //   name: "服务中心",
  // },
  // {
  //   name: "社区",
  // },
]);
// 三级分类数据
const categoryInfos = ref([
  { title: "手机" },
  { title: "电视" },
  { title: "家电" },
  { title: "笔记本 平板" },
  { title: "出行 穿戴" },
  { title: "耳机 音箱" },
  { title: "健康 儿童" },
  { title: "生活 箱包" },
  { title: "智能 路由器" },
  { title: "电源 配件" },
]);
// 轮播图数据
const swiperList = [
  {
    id: 1,
    imgPath:
      "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f17c5025e92a9ea796f958f90e36167e.jpg?w=2452&h=920",
  },
  {
    id: 2,
    imgPath:
      "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c162874708ca7856f972ef5eee976e3a.jpg?thumb=1&w=1533&h=575&f=webp&q=90",
  },
  {
    id: 3,
    imgPath:
      "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5b7df77272b132ae53d680ef2e1bd15e.jpg?thumb=1&w=1533&h=575&f=webp&q=90",
  },
];
// 第一栏选项卡数据
const oneTabs = [
  { id: 1, text: "保障服务" },
  { id: 2, text: "企业团购" },
  { id: 3, text: "F码通道" },
  { id: 4, text: "米粉卡" },
  { id: 5, text: "以旧换新" },
  { id: 6, text: "话费充值" },
];
// 第一栏图片地址
const oneImgs = [
  {
    url: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0cf5e958bc88727b50c5c5fba7a8f47a.jpg?w=632&h=340",
  },
  {
    url: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6dd2f3e0de4e6cbba98fd3799cfa5bf7.jpg?w=632&h=340",
  },
  {
    url: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d7d4be1a9e701e16de498f89b1865867.jpg?w=632&h=340",
  },
];

onMounted(async () => {
  // 处理分类栏数据
  for (let index = 0; index < 24; index++) {
    categorys.value.push({
      id: index + 1,
      imgUrl:
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b656495821144d92bd932d91eedcf659.png?thumb=1&w=50&h=50&f=webp&q=90",
      title: "Redmi X65 2022款",
    });
  }
  // 获取手机楼层数据
  const res = await getFloorGoods("手机");
  phoneInfos.value = res.Product.map((item: any) => {
    return {
      id: item.product_id,
      url: "http://101.132.181.9:3000/" + item.product_picture,
      name: item.product_name,
      desc:
        item.product_intro.length <= 44
          ? item.product_intro
          : item.product_intro.substr(0, 44) + "...",
      price: item.product_price,
    };
  });
  // 添加一条数据沾满8格渲染数据
  phoneInfos.value.push({
    id: 99,
    url: "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202212301043_9e2a889ac4d99a1bbf95aa2defda039a.png?thumb=1&w=250&h=250&f=webp&q=90",
    name: "Redmi 12C",
    desc: "高性能长续航，5000万像素超清双摄，全新多彩配色",
    price: 699,
  });
  // 获取家电楼层数据
  const jiadianRes = await getHotGoods(["电视机", "空调", "洗衣机"]);
  jiadianInfos.value = jiadianRes.Product.map((item: any) => {
    return {
      id: item.product_id,
      url: "http://101.132.181.9:3000/" + item.product_picture,
      name: item.product_name,
      desc:
        item.product_intro.length <= 44
          ? item.product_intro
          : item.product_intro.substr(0, 44) + "...",
      price: item.product_price,
    };
  });
  // 添加三条数据沾满10格渲染数据
  for (let index = 0; index < 3; index++) {
    jiadianInfos.value.push({
      id: 99,
      url: "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202212301043_9e2a889ac4d99a1bbf95aa2defda039a.png?thumb=1&w=250&h=250&f=webp&q=90",
      name: "Redmi 12C",
      desc: "高性能长续航，5000万像素超清双摄，全新多彩配色",
      price: 699,
    });
  }
});
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
/* 公共版心样式 */
.container {
  width: 100%;
  height: 100%;
  background-color: white;
}
/* 版心 */
.center {
  width: 80vw;
  margin: 0 auto;
}
.category-box {
  margin-top: 20px;
  position: relative;
  width: 100%;
  height: 460px;
}
/* 轮播图 */
.category {
  height: 460px;
  width: 15.4vw;
  position: absolute;
  top: -460px;
  left: 0;
  z-index: 1;
}
.categoryBox {
  display: none;
  position: absolute;
  height: 460px;
  background-color: white;
  max-width: 65.6vw;
  top: 0;
  z-index: 1;
  left: 15.4vw;
  /* background-color: red; */
  box-shadow: 3px -1px 18px 1px rgb(0 0 0 / 50%);
}
.categoryBox-wrap {
  display: flex;
}
.categoryBox-col {
  display: flex;
  flex-direction: column;
}
.categoryBox_item {
  padding: 18px 20px;
  width: 16.16vw;
  height: 77px;
  line-height: 37px;
}
.categoryBox_item:hover > span {
  color: #ff6a00;
}
.categoryBox_item span {
  display: inline-block;
  width: 156px;
  font-size: 12px;
}
.categoryBox_item img {
  height: 40px;
  width: 40px;
  margin-right: 12px;
  display: inline;
}
.carousel {
  height: 460px;
}
.swiper-wrapper {
  display: flex;
  flex-direction: row;
}
.swiper-slide {
  width: 100%;
  height: 460px;
  line-height: 460px;
  text-align: center;
}
/* .swiper-pagination-horizontal {
  display: block;
  border: 100px solid red;
  height: 50px;
  z-index: 999;
}
.swiper-pagination-bullet {
  border: 20px solid green;
  border-radius: 50%;
} */
.carousel-img {
  height: 460px;
}
/* 第二栏 */
.showTwo {
  height: 120px;
  /* margin: 20px 0; */
}
/* 第二栏版心 */
.cTwo {
  margin-top: 20px;
  background-color: #f5f5f5;
}
/* 第一栏 */
.showOne {
  /* margin: 14px 0 20px 0; */
  margin-top: 14px;
  padding-bottom: 20px;
}
.oneFirst {
  padding: 3px;
  width: 15.4vw;
  background-color: #5f5750;
}
.oneFirst-item {
  width: 5vw;
  height: 82px;
  color: #c3c0bd;
  padding-top: 18px;
  text-align: center;
  font-size: 12px;
}
.oneFirst-item span:first-of-type {
  font-size: 24px;
}
.one-img {
  width: 20.8vw;
  height: 170px;
}
.one-img:hover {
  box-shadow: -8px -2px 18px 1px rgb(0 0 0 / 50%);
}

/* 三级分类 */
.center {
  /* position: relative; */
}
.category {
  position: inherit;
  /* top: 100px; */
  /* left: 0; */
  width: 15.4vw;
  height: 460px;
  background-color: #a5a3a3;
  padding: 20px 0;
  transition-property: background-color;
  transition-timing-function: linear;
  transition-duration: 1s;
}
.category:hover {
  background-color: #4a4c53;
}
.category li {
  height: 42px;
  line-height: 42px;
}
.category li:hover {
  background-color: #ff6a00;
}
.category li a {
  margin-left: 30px;
  color: white;
}
/* 导航栏 */
.nav {
  height: 100px;
  line-height: 100px;
}
.logo-box {
  height: 100px;
}
.logo {
  height: 56px;
  width: 56px;
  display: inline-block;
  margin: auto;
}
.nav-item a:hover {
  color: #ff6a00;
}
.nav-box {
  line-height: 100px;
  margin-right: 15.5vw;
}
.nav-box li a {
  font-size: 16px;
}
.search-inp {
  height: 50px;
  width: 244px;
  border: 1px solid gray;
  /* text-indent: 10px; */
  padding: 10px;
  margin-top: 25px;
  outline: none;
}
.search-btn {
  border: 1px solid gray;
  height: 50px;
  width: 70px;
  margin-top: 25px;
  border-left-style: none;
  border-radius: 0;
  line-height: 50px;
  text-align: center;
}
</style>
